{% extends 'base.html' %}

{% block content_left %}
    <div class="col-md-9 cl-left">
        <div class="recommend-index">
            <div class="recommend-top">

                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <a href="{{ first_banner.link_url }}">
                                <img class="d-block w-100" src="{{ first_banner.img.url }}"
                                     alt="">
                            </a>

                        </div>
                        {% for item in surplus_banners %}
                            <div class="carousel-item">
                                <a href="{{ item.link_url }}">
                                    <img class="d-block w-100" src="{{ item.img.url }}"
                                         alt="">
                                </a>

                            </div>
                        {% endfor %}
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                       data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                       data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
{#            <div class="recommend-bottom">#}
{#                <div class="recommend-item">#}
{#                    <a href="#"><img src="../static/temporary-img/recommended-left.jpg"#}
{#                                     class="img-fluid" alt=""></a>#}
{#                </div>#}
{#                <div class="recommend-item">#}
{#                    <a href="#"><img src="../static/temporary-img/recommended-right.jpg"#}
{#                                     class="img-fluid" alt=""></a>#}
{#                </div>#}
{#            </div>#}
        </div>

            <div class="cl-artical-content">
                <h2 class="cl-artical-title">{{ article.title }}</h2>
                <div class="cl-card-tag">
                    <div><span>作者：{{ article.author }}</span></div>
                    <div><span>{{ article.total_views }}</span>人浏览 / <span>{{ article.comments_count }}</span>人评论</div>
                </div>
                <div class="cl-artical">
                    {{ article.content | safe }}
                </div>
            </div>

        <div class="recommend-panel">
                    <h4 class="right-card-title">相关文章</h4>
                    <div class="card-deck">
                        {% for corrtag in corrtags %}
                            <div class="card ll-panel">
                                <a class="recommend-panel-link" href=" {% url 'home:detail' %}?art_id={{ corrtag.id }}">
                                    <div class="recommend-panel-top">
                                        <img src="{{ corrtag.avatar.url }}" class="img-fluid" alt="">
                                    </div>
                                    <div class="recommend-panel-bottom">
                                        {{ corrtag.sumary }}
                                    </div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>



            <form class="cl-comment-from" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="art_id" value="{{ article.id }}">
                    <div><textarea placeholder="说点什么吧..." rows="5" name="content"></textarea></div>
                    <button type="submit">留言</button>
                    <span class="clearfix"></span>
                </form>


            <h4 class="right-card-title">全部评论</h4>
                {% for comm in comms %}
                    <div class="comment-panel">
                        <div class="comment-panel-portrait">
                            <img src="{{ comm.user.avatar.url }}" class="img-fluid rounded-circle" alt="">
                        </div>
                        <div class="comment-panel-content">
                            <div class="comment-panel-content-item">
                                <div class="comment-author">{{ comm.user.username }}</div>
                                <div>{{ comm.created_time }}</div>
                            </div>
                            <div class="comment-panel-content-main">{{ comm.content }}</div>
                        </div>
                        <span class="clearfix"></span>
{#                        <div class="text-primary"><a href="">回复</a></div>#}
                    </div>
                {% endfor %}
     <div class="comment-panel">
                    <div class="comment-panel-portrait">
                        <img src="../static/img/portrait.png" class="img-fluid rounded-circle" alt="">
                    </div>
                    <div class="comment-panel-content">
                        <div class="comment-panel-content-item">
                            <div class="comment-author">wjmyly7336064</div>
                            <div>2017-10-01 18:00</div>
                        </div>
                        <div class="comment-panel-content-main">相当实用，赞美了</div>
                        <!--comment-secondary-panel-->
                        <div class="comment-secondary-panel">
                            <span class="triangle-icon"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>
                            <div class="comment-panel-content">
                                <div class="comment-panel-content-item">
                                    <div class="comment-author">橘大佬</div>
                                    <div>2017-10-01 18:00</div>
                                </div>
                                <div class="comment-panel-content-main">就是有些细节再到位点就好了…</div>
                            </div>
                            <span class="clearfix"></span>
                        </div>
                        <!---->
                    </div>
                    <span class="clearfix"></span>
                    <div class="text-primary"><a href="#">回复</a></div>
                </div>




    </div>
{% endblock %}
